<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.min.js"></script>
</head>
<body>
<div id="a" style="padding-bottom: 200px">
    <h3>组件插槽</h3>
    <test val="xxx">
        test
        <span v-slot:s1>自定义S1的内容1</span>
    </test>
    <hr>
    <test val="xxx">
        <span #s1>自定义S1的内容2</span>
    </test>
    <hr>
    <test val="xxx">
        <span slot="s1">自定义S1的内容3</span>
    </test>


</div>
<script>
    Vue.component("test",{
        props : ["val"],
        template : `
            <div>
                <h4>插槽前</h4>
                <slot>默认插槽</slot>
                <slot v-slot:s1>具名插槽 S1</slot>
                <h4>插槽后</h4>
            </div>
        `,

    })


    var v = new Vue({
        el:"#a",
        data:{

        }
    })

</script>


</body>
</html>